<template>
  <div>
    <el-row>
      <el-col :span="12" :offset="12">
        <el-input style="width: 100%; " size="small" v-model="keywords" placeholder="请输入关键词" @keyup.enter.native="selectPage">
          <el-select @change="selectPage" size="small" collapse-tags clearable placeholder="请选择知识库" slot="prepend"
                     v-model="knowledgeLibId" style="width: 180px;">
            <el-option v-for="knowledgeLib in $store.state.knowledgeLibList"
                       :key="knowledgeLib.id"
                       :label="knowledgeLib.name"
                       :value="knowledgeLib.id"/>
          </el-select>
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </el-col>
    </el-row>
    <el-table :data="knowledgeList" border stripe :height="tableHeight">
      <el-table-column label="知识名称" min-width="100" prop="name"></el-table-column>
      <el-table-column label="所属知识库" min-width="100" prop="knowledgeLibId">
        <template slot-scope="scope">
          <span v-text="UTIL.getNameById($store.state.knowledgeLibList, scope.row.knowledgeLibId)"></span>
        </template>
      </el-table-column>
      <el-table-column label="内容" min-width="300" prop="content">
        <template slot-scope="scope">
          <div class="contentDiv" v-html="scope.row.content"></div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <span><el-link type="primary" @click.prevent="detail(scope.row.id)">详情</el-link></span>
          </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
        :total="total"
        :page-size.sync="pageSize"
        :current-page.sync="currentPage"
        @current-change="selectPage"
        @size-change="handleSizeChange"
        background
        layout="total, sizes, prev, pager, next, jumper"
        style="text-align: right;"></el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: "KnowledgeTable",
    data() {
      return {
        keywords: '',
        knowledgeLibId: '',
        knowledgeList: [],
        tableHeight: CONST.WORKSPACE_HEIGHT - 80,
        pageSize: 10,
        currentPage: 1,
        total: 0,
      }
    },
    methods: {
      handleSizeChange() {
        this.currentPage = 1
        this.selectPage()
      },
      selectPage() {
        if (this.keywords) {
          this.axios.get('/pmph/action/esKnowledge/selectPage', {
            params: {
              keywords: this.keywords,
              knowledgeLibId: this.knowledgeLibId,
              currentPage: this.currentPage,
              pageSize: this.pageSize,
            }
          }).then((res) => {
            this.knowledgeList = res.data.records
            this.total = res.data.total
          })
        }
      },
      detail(id) {
        this.$store.commit('setKnowledgeDetailId', id)
        this.$store.commit('setKnowledgeDetailStatus', 'published')
        this.$store.commit('showKnowledgeDetail')
      },
    },
    created() {
    }
  }
</script>

<style scoped>
/deep/ .contentDiv {
  max-height: 200px;
  overflow-y: auto;
  white-space: initial !important;
}
</style>
